<template>
  <div id="study" style="width: 100%; height: 100%"></div>
</template>

<script>
import echarts from "echarts";
import request from "@/utils/request";
export default {
  name: "student",
  data() {
    return {
      list: [],
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    async initChart() {
      const { data } = await request({
        url: `/api/portal/getks/StudyTj?organizeId=${this.$store.getters.organizeId}`,
        method: "post"
      });
      let dateList = data.dateList.map(
        item => (item = item.slice(5, item.length))
      );
      let studyList = data.studyList;
      let studyedList = data.studyedList;
      let option = {
        title: {
          text: "学习统计",
          textStyle: {
            color: "#8c88a1"
          }
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0,
          top: "20%",
          left: "3%",
          right: "3%",
          bottom: "5%",
          containLabel: true
        },
        legend: {
          orient: "horizontal",
          left: "center",
          top: "top",
          padding: [20, 0, 0, 0],
          data: ["学习人数", "学完人数"],
          //图例文字样式
          textStyle: {
            color: "#8c88a1",
            fontSize: "1rem"
          }
        },
        xAxis: [
          {
            type: "category",
            data: dateList.reverse(),
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "学习人数",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#4992f4" //改变折线点的颜色
              }
            },
            data: studyList.reverse()
          },
          {
            name: "学完人数",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#03bd79" //改变折线点的颜色
              }
            },
            data: studyedList.reverse()
          }
        ]
      };
      this.chart = echarts.init(document.getElementById("study"));
      this.chart.setOption(option);
      window.onresize = this.chart.resize();
    }
  }
};
</script>
